@import "./../Common.less";
@text_line_height:.6rem;
.Orderpay{
  width:100%;
  height:100%;
  background: #F5F5F5;
  box-sizing: border-box;
  .boxContents{
    .addressBox{
      padding-top:.23rem;
    }
    .noPaddingAddressBox{
      padding-top:0rem;
    }
    .contents{
      width:7.1rem;
      margin:0 auto;
      background: #ffffff;
      -webkit-border-radius:.15rem;
      -moz-border-radius:.15rem;
      border-radius:.15rem;
      box-sizing: border-box;
      padding:0rem .57rem 0rem .33rem;
      box-shadow:-5px 0 3px  #F6EFE7, //左边阴影
      0px 0px 0px #f5f5f5, //顶部阴影
      0px 34px 20px  #F6EFE7, //底部阴影
      5px 0 3px  #F6EFE7; //右边阴影;
      .destination{
        padding-top:.1rem;
        position: relative;
        .menu{
          position: relative;
          height:@text_line_height;
          line-height:@text_line_height;
          .menuItemIcon{
            width:.25rem;
            height:.25rem;
            position: absolute;
            top:50%;
            transform:translateY(-50%);
          }
          .label{
            color: #000;
            font-size:@min_font_size_32;
            display: block;
            line-height:@text_line_height;
            padding-left:0.5rem;
            width:4rem;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .detail_address{
          .label{
            color: #999;
            font-size:@min_font_size_18;
          }
        }
        .dotDiv{
          width:.25rem;
          height:0.35rem;
          position: absolute;
          top:0.5rem;
          left:0rem;
          img{
            width:.25rem;
          }
        }
      }
      .price{
        flex:1;
        text-align: right;
        color: #000;
        font-size:@min_font_size_32;
        .priceTile,.priceNumber,.payStatus{
          height:@text_line_height;
          line-height:@text_line_height;
        }
        .payStatus{
          color:#FF5700;
        }
      }
      .orderAction{
        padding:.0rem  0rem 0rem .23rem;
        .actionItem{
          flex:1;
          margin: 0.32rem 0rem .2rem 0rem;
          span{
            height:.54rem;
            line-height:.54rem;
            border-radius: .27rem;
            border:.03rem solid #D0CECE;
            font-size:@min_font_size_32;
            width:1.52rem;
            display: inline-block;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
          }
        }
        .actionItem:last-child{
          text-align: right;
        }
      }
      .orderAginOrder{
        padding:.1rem 0rem;
        font-size:@min_font_size_18;
        color: #1BAC2E;
      }
    }
  }
  .info{
    padding:.32rem 0rem .34rem 0rem;
    .label{
      width:7.1rem;
      background: #ffffff;
      height:.7rem;
      line-height:.7rem;
      text-align: center;
      border-radius:0.15rem;
      font-size:@min_font_size_24;
      margin:0 auto;
    }
  }
  .mapContainer{
    width:100%;
    height:100%;
    border-radius:0.15rem;
    .amap-lib-driving{
      display: none !important;
    }
  }
  .bottomPay{
    height:2.03rem;
    position: fixed;
    bottom:0rem;
    width:100%;
    padding:0.55rem 0.2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #ffffff;
    .pay{
      flex:1;
      height:.94rem;
      line-height:.94rem;
      color: #ffffff;
      text-align: center;
      background:linear-gradient(128deg,rgba(255,142,1,1),rgba(255,87,0,1));
      border-radius:.47rem;
      margin:0 auto;
      font-size:@title_size;
      font-weight:500;
    }
    .pay:first-child{
      margin-right:.5rem;
    }
  }
  .driverInfo{
    position: fixed;
    bottom:.2rem;
    width:7.1rem;
    left:50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #ffffff;
    box-shadow:0rem 0rem .16rem 0rem rgba(0, 0, 0, 0.19);
    border-radius:.15rem;
    padding-top:.2rem;
    .driverLogo{
      img{
        width:1.5rem;
        height:1.5rem;
        padding:0rem .2rem;
      }
    }
    .driverContents{
      flex:1;
      .name{
        border-bottom:1px solid #ececec;
        padding-bottom:.1rem;
      }
      .contentsBox{
        position: relative;
        .carInfo{
          padding:.1rem 0rem;
        }
        .evaluate{
          padding-bottom:.1rem;
          margin-right:1.2rem;
          img{
            width:.4rem;
            height:.4rem;
          }
        }
        .telphone{
          position: absolute;
          top:0rem;
          right:.2rem;
          img{
            width:1rem;
            height:1rem;
          }
        }
      }
    }
  }
  .detailAddress{
    width: 100%;
    background: #ffffff;
    position: fixed;
    z-index: 1000;
    padding: 0rem .3rem;
    box-sizing: border-box;
    animation:showAddress .5s ease;
    animation-fill-mode: forwards;
    .addreessItem{
      padding: .3rem 0rem 0rem 0rem;
      border-bottom: 1px solid #ececec;
    }
  }
  .noData{
    position: fixed;
    width:100%;
    height:100%;
    .title{
      text-align: center;
      position: fixed;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
    }
  }
  .returnBack{
    width: .8rem;
    height: .8rem;
    position: fixed;
    z-index: 100001;
    bottom: 2.5rem;
    right:10px;
  }
}
@keyframes showAddress {
  0%{
    bottom:-100%;
  }
  100%{
    bottom:0rem;
  }
}
